<template>
    <div class="question-warp main">
        <ul id="Question">
            <li class="aq">
                <div class="question">
                    <div class="question-title">
                        <a>
        <div class="avatar" style="position:relative;width:1.25rem;height:1.25rem;border-radius:50%;display:inline-block;">
<img style="position:relative;width:1.25rem;height:1.25rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="info.user_avatar">
</div>
</a>
<span class="question-name">{{info.user_name}}</span>
<!--<span class="question-price">￥{{questionInfo.value}}</span>-->
</div>
<div>
    <p class="question-content">
        <span>{{info.title}}</span></p>
</div>
</div>
<div class="answer">
    <a class="avatar-wrap">
<div class="avatar" style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;">
<img style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="info.professor_avatar">
<img class="verified" style="position:absolute;width:0.6166666666666667rem;height:0.6166666666666667rem;right:0;bottom:0;" src="/fengshui/static/pic/icon/verified.png"></div>
</a>
<p v-if="info.answer_id===null" style="line-height: 1.85rem;font-size: 0.8rem">大师还未回答，请耐心等待~</p>
<player v-on:listenCountIncrease="addListenCount" :id="info.answer_id" v-if="info.answer_id!==null"></player>
<span class="duration" v-if="info.answer_id!==null">{{info.duration}}″</span>
</div>
<div class="footer">
    <span class="date">{{timeAgo}}</span>
    <like-btn class="count" :likecount="info.like_count" :questionid="info.question_id" :likeid="info.like_id" ></like-btn>
    <span class="count">
      <span>听过</span>
    <span>{{info.listen_count}}</span></span>
</div>
<div style="margin:0 -.6rem;border-top:1px solid #e5e5e5;"></div>
</li>
</ul>

<!--回答者主页跳转-->
<div id="content">
    <div>
        <div id="Card">
            <div class="tutor-card">
                <a @click="goProfessor" class="tutor-content" id="tutorCard">
                    <h3 class="tutor-name">
                        <span>{{info.professor_name}}</span>
                        <span class="count">
              <span>{{info.professor_follow_count}}</span>
                        <span>人收听</span></span>
                    </h3>
                    <p class="tutor-title">{{info.professor_title}}</p>
                </a>
            </div>
        </div>
    </div>
</div>
<customer-footer></customer-footer>
</div>

</template>
<script>
    import LikeBtn from "../components/QuestionLikeBtn"
    import {
        timeAgo
    } from '../js/util.js'

    export default {
        components: {
            LikeBtn
        },
        data: function() {
            return {
                info: {}
            }
        },
        created: function() {
            this.fetchData();
        },
        computed: {
            timeAgo: function() {
                return timeAgo(this.info.time);
            },

        },
        methods: {
            addListenCount: function() {
                this.info.listen_count = Number(this.info.listen_count) + 1;
            },
            goProfessor: function() {
                this.$router.push({
                    name: 'professor',
                    params: {
                        id: this.info.professor_id
                    }
                })
            },
            fetchData: function() {
                let vm = this;
                let params = {
                    do: 'questiondetail',
                    question_id: vm.$route.params.id
                }
                vm.$http.jsonp(vm.url.acid, {
                    params: params
                }).then(response => {
                    let body = response.body;
                    if (body.status == 'success') {
                        vm.info = body.info;
                    } else {
                        vm.$vux.alert.show({
                            title: '错误提示！',
                            content: body.msg
                        })
                    }
                }, response => {
                    vm.$vux.alert.show({
                        title: '错误提示!',
                        content: '网络连接失败，请连网后重试'
                    })
                });

            }
        }
    }
</script>
<style scoped>
    .aq {
        padding: 1rem .6rem 0;
        background: #fff;
    }
    
    a,
    img {
        -webkit-touch-callout: none;
        text-decoration: none;
    }
    
    li,
    ol,
    ul {
        list-style: none;
    }
    
    .question {
        overflow: hidden;
    }
    
    .question .question-title .question-name {
        display: inline-block;
        margin-left: .475rem;
        color: #999;
    }
    
    .question .question-title .question-price {
        float: right;
        color: #f85f48;
    }
    
    .question .question-title {
        margin-bottom: .5rem;
        line-height: 1.25rem;
        font-size: 1.2rem;
        overflow: hidden;
    }
    
    .question .question-content {
        line-height: 1.1rem;
        font-size: .8rem;
        color: #3f3f3f;
    }
    
    .answer .avatar-wrap {
        display: block;
        float: left;
        margin-top: .175rem;
        margin-right: 1.05rem;
    }
    
    .answer {
        margin-top: .65rem;
        margin-bottom: .3rem;
        overflow: hidden;
    }
    
    .footer {
        font-size: .65rem;
        color: #ababab;
        overflow: hidden;
    }
    
    .footer .count,
    .footer .date,
    .footer .pic-icon,
    .footer .tip {
        display: inline-block;
        height: 1.8rem;
        line-height: 1.8rem;
    }
    
    .footer .count,
    .footer .tip {
        float: right;
        padding-left: .5rem;
    }
    
    .like-icon-gray {
        color: #999;
        background-image: url('/fengshui/static/pic/icon/like.png');
    }
    
    .like-icon {
        width: .8rem;
        height: .8rem;
        vertical-align: -5%;
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
    }
    
    .tutor-card {
        padding: .75rem .6rem;
        position: relative;
        background: #fff;
    }
    
    .tutor-card .tutor-content {
        display: block;
        color: #999;
        background: url('/fengshui/static/pic/icon/more.png') no-repeat;
        background-position: 100% 50%;
        background-size: .325rem .65rem;
    }
    
    .tutor-card .tutor-content .tutor-name {
        margin-bottom: .3rem;
        line-height: 1.12rem;
        font-size: .8rem;
        color: #3f3f3f;
    }
    
    .tutor-card .tutor-content .tutor-name .count {
        display: inline-block;
        margin-left: .2rem;
        vertical-align: baseline;
        font-size: .7rem;
        color: #999;
    }
    
    .tutor-card .tutor-content .tutor-title {
        line-height: 1.125;
        font-size: .7rem;
        color: #999;
    }
</style>